

 <#assign base=request.contextPath /> 

<!DOCTYPE html>
<head>

<link rel="stylesheet" href="${base}/css/common.css" />


<!-- bootstrap css-->
<link href="${base}/web/listbox/css/bootstrap.min.css"  rel="stylesheet" media="screen">
<!-- 选择框 css -->
<link href="${base}/web/vendors/chosen.min.css" rel="stylesheet" media="screen">
<meta charset="utf8" />
<!-- bootstrap dual listbox css -->
<link rel="stylesheet" href="${base}/web/listbox/bootstrap-duallistbox.min.css" />

<!-- 设置 该iframe中的背景色 与父页面一致-->
<style type="text/css" >

body { background:#f5f5f5  }

.bootstrap-duallistbox-container .btn.moveall,
.bootstrap-duallistbox-container .btn.removeall {
  display: none;
}

.bootstrap-duallistbox-container .btn.move,
.bootstrap-duallistbox-container .btn.remove {
  width: 100%;
}

</style>
</head>
<body >
  
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
          <h3 class="panel-title">
	组成员 
          </h3>
    </div>
    <div class="panel-body">



             <div class="control-group">
               <label class="control-label" for="select01">选择一个组 </label>
                <div class="controls">
                   <select id="selectgroup"  class="chosen-select " style="width:99%;"  tabindex="2">
                   			<option >......</option>
                   			
                   			<#list groups  as item>
                   				<option value="${item.id}">${item.name} </option>
                   				
                   			</#list>
                   </select>
                   <hr>
                   
                   </div>
                  <div class="btn-group">
					<button data-toggle="dropdown" id="selectRole"  class="btn dropdown-toggle btn-success disabled " >选择角色 <span class="caret"></span></button>
						 <ul class="dropdown-menu">
								<li><a id="doctor" class="role" >医生</a></li>
								<li><a class="role" id="user" >患者</a></li>
								<li><a id="pharmacist" class="role" >药师</a></li>
								<li><a  class="role" id="assitant"  >助手</a></li>
						 </ul>
				  </div>
              </div>

<hr>   
<div class="control-group">
               <form id="demoform"  action="#" method="post">
                    <select id="listbox"  multiple="multiple" size="10" >
                  	
                  	
                    </select>
                    <br>
                    	<div class="alert alert-success">
									双击查看用户详细信息
						</div>
      
               </form>
     
     </div>
</div>
</div>
               
               
               
<!-- bootstrap js -->
<script src="${base}/web/vendors/jquery-1.9.1.min.js"></script>
<script src="${base}/web/listbox/js/bootstrap.min.js"></script>

<!-- 选择框 js -->
<script src="${base}/web/vendors/chosen.jquery.min.js"></script>

<script >



</script>

<!-- bootstrap dual listbox js-->
<script src="${base}/web/listbox/jquery.bootstrap-duallistbox.js"></script> 

<!-- layer.js  -->
<script src="${base}/web/layer/layer.js"></script> 


<script>
		var group='',
		role = '',
		listboxsize = 10,cursize = 0; 
		


       $('#listbox').bootstrapDualListbox({
		   		  showFilterInputs:true,
				  moveOnSelect: false,
			      nonSelectedListLabel: "未入组的<span id='outGroup'  ></span>",
                  selectedListLabel: "已入组的<span id='inGroup' ></span >",
				  removeSelectedLabel: '退组',
				  moveSelectedLabel: '进组',
		          preserveSelectionOnMove: 'moved',
				  sortByInputOrder:true,
				  infoText:false
	   });
	   



		<!--选择框-->
		var config = {
		  '.chosen-select'           : {},
		  '.chosen-select-deselect'  : {allow_single_deselect:true},
		  '.chosen-select-no-single' : {disable_search_threshold:10},
		  '.chosen-select-no-results': {no_results_text:'未找到相关组' },
		  '.chosen-select-width'     : {width:"95%"}
		}
		for (var selector in config) {
		  $(selector).chosen(config[selector]);
		}
			
		
		function pull(pageno){
			
				var url = "data/"+role+"/"+group; 
				
				$.get(url,{"pageno":pageno},function(res){
					
					cursize += res.data.length;
					
					$.each(res.data,function(index,obj){
					
						$("#listbox").append("<option value="+obj.id+" selected='selected' class='detail'>"+obj.name+"[手机号:"+obj.phone+"]"+"</option>")
										
					});
					
					//alert(cursize);
					if(res.total != 0 && res.total - cursize > 0){
								$("#listbox").append("<option class='next'  selected='selected' style='background-color:#CCFFFF'>更多</option>");
								$(".next").on("dblclick",function(){
									
									
								$(".next").remove();
								pull((cursize/listboxsize)+1);
								})							
								
					}
				//刷新listbox
				$('#listbox').bootstrapDualListbox('refresh',true); 
				
				$(".detail").on("dblclick",function(){
				    url = "action/detail/"+role+"/"+$(this).val();
				    
				    
					//开启layer 
					layer.open({
						title:false,
					    type: 2, 
					    content: [url, 'yes'],
					  	offset: '100px',
					  	area: ['500px', '300px'],
					  	shade:0.001
					});

					});
				
			   });		
		}
			
			
	    $(".role").on("click",function(){
	    
			if(role != $(this).attr('id'))
				role = $(this).attr('id');
				
				$("#outGroup,#inGroup").html($(this).html());
				$("#listbox").empty();
				
				cursize = 0;
				
				//alert(role)
				
				pull(1);
				
				
	    });
	    
	    
	    
	    
	    
	    $("#selectgroup").change(function(){
			if( $(this).prop("selectedIndex") != 0){
					
					group = $(this).val();
					$("#listbox").empty();
					cursize = 0;
					
					$("#selectRole").removeClass("disabled");
					//如果角色不为空拉取数据
					if(role != '')  pull(1);
								
			}else{
					
					$("#listbox").empty();
					$('#listbox').bootstrapDualListbox('refresh',true); 
					$("#selectRole").addClass("disabled");
					group = "";

			}
	
		});
		
	
		
			
	
		
  </script>


</body>
